<template>
    <div id="BackupList">
        <div>
            <div class="broad">
                <el-breadcrumb separator=">">
                    <el-breadcrumb-item>数据备份管理</el-breadcrumb-item>
                    <el-breadcrumb-item>备份列表</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <el-dialog title="备份配置"    :visible.sync="dialogFormVisible" center :close-on-click-modal=false>
            <el-form :model="form" :rules="rules" ref="rulesform">
                <el-form-item label="备份名称" :label-width="formLabelWidth" prop="configName">
                    <el-input  size="mini" v-model="form.configName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备份方式" :label-width="formLabelWidth"   prop="backUpMode">
                  <el-radio-group v-model="form.backUpMode" @change="baseOrTable">
                        <el-radio  label="0">按库备份</el-radio>
                        <el-radio  label="1">按表备份</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item v-if="kuorbiao" label="选择备份库" :label-width="formLabelWidth" prop="selectDBName">
                    <el-select size="mini" v-model="form.selectDBName" placeholder="请选择备份库">
                        <el-option v-for="(itme,index) in dbBaseNameList" v-bind:key="index" :label="itme.description" v-bind:value="itme.name"></el-option>
<!--                        <el-option  size="mini"  label="备份库一" value="sxydresult"></el-option>-->
<!--                        <el-option  size="mini"  label="区域二" value="sxyddbhandle"></el-option>-->
                    </el-select>
                </el-form-item>
                <el-form-item v-else label="选择备份表" :label-width="formLabelWidth" prop="selectTableName">
                  <el-select size="mini" v-model="form.selectTableName" placeholder="请选择备份表">
<!--                    <el-option  size="mini"  label="备份表一" value="catalog"></el-option>-->
                        <el-option v-for="(itme,index) in dbTablenNameList" v-bind:key="index" :label="itme.description" v-bind:value="itme.name"></el-option>
<!--                    <el-option  size="mini"  label="备份表二" value="achievements"></el-option>-->
                  </el-select>
                </el-form-item>
                <el-form-item label="备份周期" :label-width="formLabelWidth" prop="backUpCycle" >
                  <el-radio-group v-model="form.backUpCycle"  @change="selectBackUpCycle">
                    <el-radio size="mini" label='0'>年/次</el-radio>
                    <el-radio size="mini" label='1'>月/次</el-radio>
                    <el-radio size="mini" label='3'>周/次</el-radio>
                    <el-radio size="mini" label='2'>日/次</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="备份日期" :label-width="formLabelWidth" prop="startDate">
                  <el-date-picker
                    v-model="form.startDate"
                    type="year"
                    placeholder="选择年"
                    size="mini"
                    format="yyyy年"
                    value-format="yyyy">
                  </el-date-picker>
                    <span class="todata">至</span>
                  <el-date-picker
                    v-model="form.endDate"
                    type="year"
                    placeholder="选择年"
                    size="mini"
                    format="yyyy年"
                    value-format="yyyy">
                  </el-date-picker>
                </el-form-item>
                 <el-form-item v-show="showZhou" label="选择周期" :label-width="formLabelWidth" prop="weekDay">
                    <el-select size="mini" v-model="form.weekDay" placeholder="请选择周期">

                      <el-option v-for="(itme,index) in options" v-bind:key="index" :label="itme.label" v-bind:value="itme.value"></el-option>

                </el-select>
              </el-form-item>
              <el-form-item label="备份时间" :label-width="formLabelWidth" prop="startTime">
                <el-time-picker
                  v-model="form.startTime"
                  size="mini"
                  :picker-options="{
                        selectableRange: '00:00:00 - 23:59:59'
                  }"
                  placeholder="选择备份时间"

                  value-format="HH:mm:ss">
                </el-time-picker>
<!--                <span class="todata">至</span>-->
<!--                <el-time-picker-->
<!--                  v-model="form.endTime"-->
<!--                  size="mini"-->
<!--                  :picker-options="{-->
<!--                        selectableRange: '00:00:00 - 23:59:59'-->
<!--                  }"-->
<!--                  placeholder="选择备份时间"-->
<!--                  value-format="HH:mm:ss">-->
<!--                </el-time-picker>-->
              </el-form-item>
                <el-form-item label="备份说明" :label-width="formLabelWidth" prop="remark">

                    <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="form.remark"
                            maxlength="120"
                            show-word-limit
                            size="medium"
                    >
                    </el-input>

                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" type="goon" round @click="dialogFormVisible = false">关 闭</el-button>
                <el-button size="medium" type="goon" round @click="submitForm('rulesform')">提 交</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改备份配置" :visible.sync="dialogFormVisible2" center :close-on-click-modal=false>
          <el-form :model="editForm"  :rules="rules"  ref="form">
            <el-form-item label="备份名称" :label-width="formLabelWidth" >
              <el-input  size="mini" v-model="editForm.configName" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="备份方式" :label-width="formLabelWidth"   >
              <el-radio-group disabled v-model="editForm.backUpMode" @change="editBaseOrTable">
                <el-radio  label="0">按库备份</el-radio>
                <el-radio  label="1">按表备份</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="editkuorbiao" label="选择备份库" :label-width="formLabelWidth" >
              <el-select disabled size="mini" v-model="editForm.selectDBName" placeholder="请选择备份库">
<!--                <el-option  size="mini"  label="备份库一" value="sxydresult"></el-option>-->
<!--                <el-option  size="mini"  label="区域二" value="sxyddbhandle"></el-option>-->
                <el-option  v-for="(itme,index) in dbBaseNameList" v-bind:key="index" :label="itme.description" v-bind:value="itme.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-else label="选择备份表" :label-width="formLabelWidth" >
              <el-select disabled size="mini" v-model="editForm.selectTableName" placeholder="请选择备份表">
<!--                <el-option  size="mini"  label="备份表一" value="catalog"></el-option>-->
<!--                <el-option  size="mini"  label="备份表二" value="achievements"></el-option>-->
                <el-option v-for="(itme,index) in dbTablenNameList" v-bind:key="index" :label="itme.description" v-bind:value="itme.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备份周期" :label-width="formLabelWidth" >
              <el-radio-group v-model="editForm.backUpCycle"  @change="editFormConfigCycle">
                <el-radio  label='0'>年/次</el-radio>
                <el-radio  label='1'>月/次</el-radio>
                <el-radio  label='3'>周/次</el-radio>
                <el-radio  label='2'>日/次</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备份日期" :label-width="formLabelWidth" >
              <el-date-picker
                v-model="editForm.startDate"
                type="year"
                placeholder="选择年"
                size="mini"
                format="yyyy年"
                value-format="yyyy">
              </el-date-picker>
              <span class="todata">至</span>
              <el-date-picker
                v-model="editForm.endDate"
                type="year"
                placeholder="选择年"
                size="mini"
                format="yyyy年"
                value-format="yyyy">
              </el-date-picker>
            </el-form-item>
            <el-form-item v-show="showZhouEdit" label="选择周期" :label-width="formLabelWidth" prop="weekDay">
              <el-select size="mini" v-model="editForm.weekDay" placeholder="请选择周期">
                <el-option v-for="(itme,index) in options" v-bind:key="index" :label="itme.label" v-bind:value="itme.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备份时间" :label-width="formLabelWidth" >
              <el-time-picker
                v-model="editForm.startTime"
                size="mini"
                :picker-options="{
                          selectableRange: '00:00:00 - 23:59:59'
                    }"
                placeholder="选择备份时间"
                value-format="HH:mm:ss">
              </el-time-picker>
<!--              <span class="todata">至</span>-->
              <!--                <el-time-picker-->
              <!--                  v-model="form.endTime"-->
              <!--                  size="mini"-->
              <!--                  :picker-options="{-->
              <!--                        selectableRange: '00:00:00 - 23:59:59'-->
              <!--                  }"-->
              <!--                  placeholder="选择备份时间"-->
              <!--                  value-format="HH:mm:ss">-->
              <!--                </el-time-picker>-->
            </el-form-item>
            <el-form-item label="备份说明" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="editForm.remark"
                maxlength="120"
                show-word-limit
                size="medium"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
          <el-button size="medium" type="goon" round @click="dialogFormVisible2 = false">关 闭</el-button>
          <el-button size="medium" type="goon" round @click="updateForm('form')">提交修改</el-button>
        </div>
      </el-dialog>
        <div class="searchBar demo-input-suffix">
            <span>备份名称</span>
            <el-input
                    size="medium" v-model="setFindConditions.configName"
                    width="100" >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>

            <span class="margin_left">备份方式</span>
<!--            <el-input size="mini" >-->
<!--                <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--            </el-input>-->
          <el-select size="medium" v-model="setFindConditions.configMode" placeholder="请选择备份方式">
            <el-option  size="medium"  label="按库备份" value="0"></el-option>
            <el-option  size="medium"  label="按表备份" value="1"></el-option>
          </el-select>
            <span class="margin_left">备份周期</span>
<!--            <el-input size="mini">-->
<!--                <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--            </el-input>-->
          <el-select size="medium" v-model="setFindConditions.configCycle"  placeholder="请选择备份周期">
                  <el-option  size="medium"  label="年/次" value="0"></el-option>
                  <el-option  size="medium"  label="月/次" value="1"></el-option>
                  <el-option  size="medium"  label="周/次" value="3"></el-option>
                  <el-option  size="medium"  label="日/次" value="2"></el-option>
           </el-select>
            <el-button type="goon" round  @click="findata"
                       size="medium"   icon="el-icon-search">
                查找
            </el-button>
            <el-button type="goon" round  @click="restFindConditions"
                       size="medium"   icon="el-icon-refresh">
                重置
            </el-button>
             <div id="backup">
                <el-button type="goon" @click="setBackup" v-has="'xinzengbeifen'"
                           size="medium"   icon="el-icon-plus" round>
                    备份配置
                </el-button>
<!--                <el-button type="goon"  @click="onTimeBackupMulti"-->
<!--                           size="medium"   icon="el-icon-date" round>-->
<!--                    即时备份-->
<!--                </el-button>-->
             </div>
        </div>
        <div id="thebackuplist">
            <template>
                <el-table
                        :data="backListTable"
                        border
                        :stripe="true"
                        style="width: 100%"
                        height="100%"

                        @selection-change="handleSelectionChange">
<!--                  <el-table-column-->
<!--                    type="selection"-->
<!--                    width="50">-->
<!--                  </el-table-column>-->
                    <el-table-column
                            fixed
                            prop="ID"
                            label="序号"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="configName"
                            label="备份名称"
                            width="240">
                    </el-table-column>
                    <el-table-column
                            prop="Mode"
                            label="备份类型"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="Cycle"
                            label="备份周期"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="startDate"
                            label="开始日期"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="endDate"
                            label="结束日期"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="startTime"
                            label="指定执行时间"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="createdUserName"
                            label="创建人"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="isStarted"
                            label="启动"
                            width="100">
                      <template slot-scope="scope">
                        <el-button v-has="'qidongbeifen'"  v-if="scope.row.isStarted"  type="text" size="mini" @click="changeStatus(scope.row,scope.row.isStarted)"><i class="el-icon-video-pause"  style="color: #f56c6c;font-size:20px"></i></el-button>
                        <el-button v-has="'qidongbeifen'"  v-else  type="text" size="mini" @click="changeStatus(scope.row,scope.row.isStarted)" ><i class="el-icon-video-play"   style="color:#4fc08d ;font-size:20px"></i></el-button>
                      </template>
                    </el-table-column>
                    <el-table-column
                            prop="STHXLXBM"
                            label="即刻备份"
                            width="100">
                      <template slot-scope="scope">
                        <el-button v-has="'lijibeifen'"  type="text" size="mini">  <i class="el-icon-caret-top"  @click="onTimeBackupSingle(scope.row.id)"   style="color: #bd0d11;font-size:20px"></i></el-button>
                      </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                                   >
                        <template slot-scope="scope">
<!--                            <el-button @click="handleClick(scope.row)" type="primary" size="mini"><i class="el-icon-info"></i></el-button>-->
                          <el-tooltip class="item" effect="light" content="修改备份配置" placement="top">
                              <el-button
                                      size="mini"  v-has="'xiugaibeifen'"
                                      @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i>
                              </el-button>
                          </el-tooltip>
                          <el-tooltip class="item" effect="light" content="删除备份配置" placement="top">
                              <el-button
                                      size="mini"
                                      type="danger"  v-has="'shanchubeifen'"
                                      @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i>
                              </el-button>
                          </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>

              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage1"
                  :page-sizes="[15,20,30,50]"
                  :page-size="15"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total=backupListTotalCounts>
                </el-pagination>
              </div>
            </template>
        </div>
    </div>
</template>

<script>
   import {createNamespacedHelpers} from 'vuex'
   const {mapGetters} = createNamespacedHelpers('dirmanage')
    export default {
        name: "TheBackupList",
      data(){
        return{

            options: [{
              value: '2',
              label: '星期一'
            }, {
              value: '3',
              label: '星期二'
            }, {
              value: '4',
              label: '星期三'
            }, {
              value: '5',
              label: '星期四'
            }, {
              value: '6',
              label: '星期五'
            }, {
              value: '7',
              label: '星期六'
            }, {
              value: '1',
              label: '星期天'
            }],

          editForm: {},
          selectData:[],
          showZhou:false,
          setFindConditions:{
            pageNumber:1,
            pageSize:15,
            configName:'',
            configMode:'',
            configCycle:''
          },
          dialogFormVisible2:false,
          currentPage1: 1,
          currentPage2: 5,
          currentPage3: 5,
          currentPage4: 4,
          pageObj:{
            pageNumber:1,
            pageSize:15
          },
          form: {
            configName:'',
            backUpMode:'0',
            selectDBName:'',
            selectTableName:'',
            backUpCycle:'2',
            startDate:'',
            endDate:'',
            startTime:'',
            endTime:'',
            remark:'',
            weekDay:''
          },
          rules: {
            configName: [
              { required: true, message: '请输入备份名称', trigger: 'blur' },
            ],
            backUpMode: [
              { required: true, message: '请选择备份方式', trigger: 'blur' }
            ],
            selectDBName: [
              { required: true, message: '请选择数据库', trigger: 'change' }
            ],
            selectTableName: [
              { required: true, message: '请选择数据表', trigger: 'change' }
            ],
            backUpCycle: [
              { required: true, message: '请选择备份周期', trigger: 'blur' }
            ],
            startDate: [
              { required: true, message: '请选择备份日期', trigger: 'blur' }
            ],
            endDate: [
              { required: true, message: '请选择备份日期', trigger: 'blur' }
            ],
            startTime: [
              { required: true, message: '请选择备份开始时间', trigger: 'blur' }
            ],
            endTime: [
              { required: true, message: '请选择备份结束时间', trigger: 'blur' }
            ],
            remark: [
              { required: true, message: '请填写备份说明', trigger: 'blur' }
            ],
            weekDay: [

            ]
          },
          kuorbiao:true,
          editkuorbiao:true,
          showZhouEdit:false,
          dialogTableVisible: false,
          dialogFormVisible: false,
          formLabelWidth: '100px',
          currentBackupRow:{}
        }


      },
      watch:{

      },
      methods:{
           editFormConfigCycle(val){
             if (val === '3'){
               console.log(val)
               this.showZhouEdit = true
               this.rules.weekDay.push(
                 { required: true, message: '请选择周', trigger: 'change' }
               )
             }
             else{
               this.showZhouEdit = false
               this.rules.weekDay = []
             }
           },
            selectBackUpCycle(val){
                 if (val === '3'){
                   console.log(val)
                   this.showZhou = true
                   this.rules.weekDay.push(
                     { required: true, message: '请选择周', trigger: 'change' }
                   )
                 }
                 else{
                   this.rules.weekDay = []
                 }
            },
            restFindConditions(){
              this.setFindConditions.configName = ''
              this.setFindConditions.configMode = ''
              this.setFindConditions.configCycle = ''
              this.$store.dispatch('dirmanage/getBackupList',this.setFindConditions)
            },
            findata(){
              console.log(this.setFindConditions)
              this.$store.dispatch('dirmanage/getBackupList',this.setFindConditions)
            },
            handleSelectionChange(val) {
              console.log(val)
              this.selectData = val
            },
            onTimeBackupMulti(){
               var backupIdList = []
               if (this.selectData.length){
                    for (var i =0 ;i<this.selectData.length;i++){
                       backupIdList.push(this.selectData[i].id)
                    }
               }
               else{
                  this.$message.error('未选中需要立即备份的数据')
               }
               console.log(backupIdList)
            },
            async onTimeBackupSingle(backupId){
                  await  this.$store.dispatch('dirmanage/startBackupList',backupId)
                  if (this.ontimeBackupSingle){
                    this.$message.success(this.ontimeBackupSingle)
                  }
                  else{
                    this.$message.error('备份启动失败')
                  }
            },
            changeStatus(value){
                 var currentBackupRow = JSON.stringify(value)
                 this.currentBackupRow = JSON.parse(currentBackupRow)
                // if (isStarted){
                //   this.currentBackupRow.isStarted = 0
                // }
                // else{
                //   this.currentBackupRow.isStarted = 1
                // }
                // console.log('value',value)
                // this.$store.dispatch('dirmanage/updateBackupList',this.currentBackupRow)
                 const  pageObj = this.setFindConditions
                 var  isStartedId
                 // console.log(this.currentBackupRow.isStarted)
                 if (this.currentBackupRow.isStarted){
                    isStartedId = 0
                 }
                 else{
                    isStartedId = 1
                 }
                 this.$store.dispatch('dirmanage/isSetBackup',{'Id':value.id,'isStartedId':isStartedId,'pageObj':pageObj})
            },
            handleSizeChange(val) {
              this.setFindConditions.pageSize = val
              console.log(`每页 ${val} 条`);
              console.log(this.pageObj)
              this.$store.dispatch('dirmanage/getBackupList',this.setFindConditions)
            },
            handleCurrentChange(val) {
              this.setFindConditions.pageNumber = val
              console.log(`当前页: ${val}`);
              console.log(this.setFindConditions)
              this.$store.dispatch('dirmanage/getBackupList',this.setFindConditions)
            },
            baseOrTable(){
                // console.log(this.form.bffs)
                if (this.form.backUpMode==='0'){
                    this.kuorbiao = true
                }
                else{
                    this.kuorbiao = false
                }
            },
            editBaseOrTable(){
             if (this.editForm.backUpMode==='0'){
               this.editkuorbiao = true
             }
             else{
               this.editkuorbiao = false
             }
           },
         async   submitForm(formName) {
              var formobj =this.form
              const pageObj= this.pageObj
              console.log(this.dbtablenameObj)
             await this.$refs[formName].validate((valid) => {
               if (valid) {
                  console.log(formobj)
                  if (formobj.selectTableName){
                    console.log(formobj.selectTableName)
                    for(var i=0;i<this.dbtablenameObj.length;i++){
                      if(formobj.selectTableName === this.dbtablenameObj[i].name){
                        formobj.selectDBName = this.dbtablenameObj[i].belongDatabase
                      }
                    }
                    for (var j=0;j<this.dbTablenNameList.length;j++){
                          if (formobj.selectTableName === this.dbTablenNameList[j].name){
                            formobj['description'] = this.dbTablenNameList[j].description
                            break
                          }
                    }
                  }
                  else{
                    for (var m=0;m<this.dbBaseNameList.length;m++){
                      if (formobj.selectDBName === this.dbBaseNameList[m].name){
                        formobj['description'] = this.dbBaseNameList[m].description
                        break
                      }
                    }
                  }
                  console.log('formobj',formobj)

                  // this.dialogFormVisible = false
                  this.$http4.post('/v1.0/backUpConfig/save',formobj).then((respoense)=>{
                      console.log(respoense)
                    if (respoense.data.status === '6000'){
                        this.$message.success(respoense.data.message)
                        this.$refs[formName].resetFields();
                        this.$store.dispatch('dirmanage/getBackupList',this.setFindConditions)
                    }
                     else{
                      this.$message.error("新增备份策略失败")
                    }
                  })
                  // this.$store.dispatch('dirmanage/postBackupTable', {'formobj':formobj,'pageObj':this.setFindConditions})

                } else {
                  return false;
                }
              });

            },
            updateForm(formName){
              // this.dialogFormVisible2 = false
              const pageObj = this.pageObj
              console.log(this.editForm)
              console.log('===========================')
              var updateformobj =this.editForm
              this.$refs[formName].validate((valid) => {
                if (valid) {
                  if (updateformobj.backUpMode === '0'){
                    updateformobj.selectTableName = ''
                    for (var m=0;m<this.dbBaseNameList.length;m++){
                      if (updateformobj.selectDBName === this.dbBaseNameList[m].name){
                        updateformobj['description'] = this.dbBaseNameList[m].description
                        break
                      }
                    }
                  }
                  else{
                    for(var i=0;i<this.dbtablenameObj.length;i++){
                      if(updateformobj.selectTableName === this.dbtablenameObj[i].name){
                        updateformobj.selectDBName = this.dbtablenameObj[i].belongDatabase
                      }
                    }
                    for (var j=0;j<this.dbTablenNameList.length;j++){
                      if (updateformobj.selectTableName === this.dbTablenNameList[j].name){
                        updateformobj['description'] = this.dbTablenNameList[j].description
                        break
                      }
                    }
                  }
                  console.log(updateformobj)
                  this.dialogFormVisible = false
                  this.$http4.put('/v1.0/backUpConfig/update',updateformobj).then(
                    response =>{
                       console.log(response)
                      if (response.data.status ==='6000'){
                        this.$message.success('备份配置修改成功')
                        this.$store.dispatch('dirmanage/getBackupList',this.setFindConditions)
                      }
                      else{
                        this.$message.success('备份配置修改失败')
                      }
                    }
                  )
                  // this.$store.dispatch('dirmanage/updateBackupList',{updateformobj:updateformobj,pageObj:this.setFindConditions})
                } else {
                  return false;
                }
              });
            },
            handleClick(row) {
                console.log(row);
            },
            handleEdit(index, row) {
                // console.log(row)
                var editForm = JSON.stringify(row)
                this.editForm = JSON.parse(editForm)
                this.editForm.backUpMode = this.editForm.backUpMode.toString()
                this.editForm.backUpCycle = this.editForm.backUpCycle.toString()
                if ( this.editForm.weekDay !==null){
                  this.editForm.weekDay = this.editForm.weekDay.toString()
                }
                if (this.editForm.backUpMode ==='0'){
                  this.editkuorbiao = true
                }
                else {
                  this.editkuorbiao = false
                }
                if (this.editForm.backUpCycle ==='3'){
                    this.rules.weekDay.push(
                      { required: true, message: '请选择周', trigger: 'change' }
                    )
                   this.showZhouEdit = true
                }
                else {
                   this.showZhouEdit = false
                  this.rules.weekDay = []
                }
                // console.log(typeof(this.editForm.backUpMode));
                // console.log(this.editForm)
                this.dialogFormVisible2 = true

            },
            handleDelete(index, row) {
                console.log(index, row);
                console.log(row.id)
                const pageObj = this.pageObj
                this.$store.dispatch('dirmanage/deleteBackupList', {'deleteId':row.id,'pageObj':this.setFindConditions})
            },
            setBackup(){
                this.dialogFormVisible = true
            },
            getformdata(){
              console.log(this.form)
          }

        },
      mounted() {
            this.$store.dispatch('dirmanage/getCatlog')
            this.$store.dispatch('dirmanage/getBackupList',this.setFindConditions)
            this.$store.dispatch('dirmanage/getDbaseName')
            this.$store.dispatch('dirmanage/getTableName')
      },
      computed:{
          ...mapGetters(['backListTable']),
          ...mapGetters(['backupListTotalCounts']),
          ...mapGetters(['ontimeBackupSingle']),
          ...mapGetters(['dbBaseNameList']),
          ...mapGetters(['dbTablenNameList']),
          ...mapGetters(['dbtablenameObj'])
      },
    }
</script>

<style scoped lang="scss">
  .block{
    /*padding-top: 1px;*/
  }
#BackupList{
  position: absolute;
  left: 15.5%;
  //height: 87%;
  top: 9.5%;
  bottom: 1.5%;
  width: 83.5%;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 5px #acc4fe;
}
.broad{
  position: absolute;
  width: 98%;
  display: inline-block;
  padding: 1%;
  color: black;
  font-size: 20px;
  border-bottom: 2px solid #e9eef3;
  background-color: #ffffff;
  border-radius: 8px 8px 0 0 ;
}
.searchBar{
    display: inline-block;
    /*margin-left: 80px;*/
}
.searchBar > span{
    padding: 10px;
    font-size: 14px;
}
.searchBar > .el-input{
     width: 15%!important;

 }
.demo-input-suffix{
    /*margin-bottom: 12px;*/
    position: absolute;
    top: 50px;
    /*display: none;*/
    background-color: #ffffff;
    padding: 0.5%;
    width: 99%;
    /*border-bottom:2px solid #e9eef3 ;*/
}
.el-button{
    margin-left: 10px;
    font-size: 14px!important;
}
#backup{
    position: absolute;
    left: 80%;
    display: inline-block;
}
#thebackuplist{
    position: absolute;
    top: 100px;
    width: 99%;
    padding: 0.5%;
    height: calc(100% - 147px);
}
::v-deep.el-table .cell{
    text-align: center;
}
  ::v-deep.el-table td{
      padding: 4px 0 ;
  }
  ::v-deep .el-dialog{
    position: absolute;
    top: 10%;
    left: 40%;
    //border: 3px solid #25e4a3;
    width:540px;
}
//  ::v-deep .el-dialog__header{
//        background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
//        padding: 10px;
//    }
//  ::v-deep .el-dialog__headerbtn{
//        top: 15px;
//    }
//  ::v-deep .el-dialog__title{
//    color: #e9eef3;
//}
//  ::v-deep .el-dialog__close{
//    color: #e9eef3;
//}
  ::v-deep .el-form-item{
    margin-bottom: 10px;
    width: 400px;
    margin-right: 0;
}
  ::v-deep .el-form-item__error{
  padding: 0;
}
  ::v-deep .el-form-item >.el-form-item__content{
    width: 400px;
}
/*/deep/.el-select > .el-input{*/
/*    width: 400px;*/
/*}*/
  ::v-deep.el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 170px;
}
.todata{
        padding: 0 15px  0 15px;
}
::v-deep.el-textarea__inner{
  margin-top: 6px;
}
  span{
    color: #203f6e;
    font-size: 14px;
  }

.searchBar{
  .el-button:focus, .el-button:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  .el-button--goon:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
  ::v-deep.el-input__inner{
    border-radius: 45px;
  }
}
  //::v-deep .el-input__inner{
  //  border-radius: 45px;
  //}

  ::v-deep .el-dialog__title{
    font-weight: bold;
    font-size: 20px;
    color: #45524f;
  }
  .el-dialog__body{
    .el-form{
      .el-form-item {
        .el-form-item__content{
          .el-input{
            ::v-deep  .el-input__inner{
              border-radius: 45px;
            }
          }

        }
      }
    }
  }
  ::v-deep .el-select .el-input__inner{
    border-radius: 45px;
  }
  //::v-deep .el-dialog__headerbtn .el-dialog__close{
  //  display: none;
  //}
  ::v-deep .el-form-item__content{
    ::v-deep  .el-input__inner{
      border-radius: 45px;
    }
  }
  ::v-deep .el-dialog__header {
    //background: -webkit-linear-gradient(left, #3ee8c2, #25e4a3);

    border-radius: 8px 8px 0 0 ;
  }
  ::v-deep .el-dialog{
    border-radius: 8px;
  }
  ::v-deep .el-button--goon:focus, .el-button--goon:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  ::v-deep .el-button--goon:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
  ::v-deep  .el-textarea__inner{
     margin-top: 10px;
  }

</style>
